<template>
	<view class="box">
		<view class="content">
			<view class="base-coupons">
				<view class="up" style="padding-top: 20rpx;">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 225px;height: 225px;" />
					<view class="text">请到阅览室扫码器前自主扫码签到</view>
				</view>
				<view class="down">
					<view class="libiary">
						<view class="library_left">{{ seat.LibiaryName }}</view>
						<view class="library_right">场馆</view>
					</view>
					<view class="libiary">
						<view class="library_left">{{ seat.SeatId }}</view>
						<view class="library_right">位置</view>
					</view>


					<text style="font-size: 12px; color: #616161;">如果遇到异常，请尝试应急码等方式签到</text>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="position">
				<view class="position-left">
					<u-icon name="map" color="#000" size="24"></u-icon>
					<view style="font-size: 17px;">定位签到</view>
				</view>
				<view class="position-right color2" @click="getAdd()" v-if="position == false">去定位</view>
				<view class="position-right color2" @click="qiandao()" v-else-if="position">定位成功</view>
			</view>
			<view class="address">
				<view class="addressText">{{ address }}</view>
			</view>
		</view>
		<view class="sure" @click="ToHomePage">返回首頁</view>
	</view>
</template>

<script>
	let _self = null;
	import uQRCode from '../../../components/uqrcode/common/uqrcode.js';
	export default {
		data() {
			return {
				seat: {
					// LibiaryName: '语言文学阅览室',
					// SeatId: '22号',
					LibiaryName: '',
					SeatId: ''
				},
				position: false,
				Register: {},
				seatId: {},
				address: '',
				latitude: '', //当前经度
				longitude: '', //当前维度
				signInfo: {
					mode: '',
					latitude: '', //纬度
					longitude: '', //经度
					address: ''
				},
			}

		},


		onLoad(params) {


			this.commitType = params.type;

			console.log(params);
			this.seatId = params.seatId;
			this.commitType = params.type;
		
			this.init();
			_self = this;
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			getLocation() {
				var that = this;
				// 显示提示框
				uni.showLoading({
						title: '获取定位中...',
						mask: true
					}),
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							uni.hideLoading(); //取消提示框
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							console.log(that.longitude, that.latitude);
							that.signInfo.longitude = res.longitude;
							that.signInfo.mode = '正常记录';
							that.signInfo.latitude = res.latitude;
							that.getAdd();
						},
						fail(err) {
							uni.hideLoading(); //取消提示框
							that.address = '请检查位置信息!';
							uni.showToast({
								title: '请检查位置信息状态！',
								icon: 'none',
								mask: true,
								duration: 3000
							});
						}
					});
			},
			getAdd() {

				uni.$u.http
					.post('/app/seat/signIn/', {
						seatId: this.seatId,
						latitude: this.latitude,
						longitude: this.longitude,
						type: 1
					})
					.then(res => {
						console.log('定位', res.data);

						uni.showToast({
							title: "成功",
							icon: 'none',
							mask: true,
							duration: 3000,

						});
						// uni.switchTab({
						// 	url: "/pages/bottom-nav/index/index"
						// })
						uni.$emit('handleSuccess', true)
					})
			},
			// 选择地址
			openLocation() {
				_self.getLocation();
				return;
				uni.chooseLocation({
					success: function(res) {
						_self.address = res.address;
						_self.signInfo.address = res.address;
					}
				});
			},
			qiandao() {
				uni.$u.http
					.post('/app/seat/signIn/', {
						seatId: this.seatId,
						latitude: this.latitude,
						longitude: this.longitude
					})
					.then(res => {
						console.log('定位', res.data);
						let msg = res.data;
						uni.showToast({
							title: msg,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					})

				// 获取当前位置的"腾讯位置服务"
				var url =
					`https://apis.map.qq.com/ws/geocoder/v1/?location=${_self.latitude},${_self.longitude}&key=FA3BZ-WUREQ-X5N5D-GTIKO-NRLEH-6HBLF`;
				uni.request({
					url,
					success(res) {
						console.log(res.data);
						var data = res.data;
						if (data.status != 0) {
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							return;
						}
						let address = res.data.result.address + res.data.result.formatted_addresses.recommend;
						_self.address = address;
						console.log(_self.address);
						_self.position = true;
						_self.signInfo.address = address;
					}
				});
			},
			// 选择地址
			openLocation() {
				_self.getLocation();
				return;
				uni.chooseLocation({
					success: function(res) {
						_self.address = res.address;
						_self.signInfo.address = res.address;
					}
				});
			},
			qiandao() {
				uni.$u.http
					.post('/app/seat/signIn/', {
						seatId: this.seatId,
						latitude: this.latitude,
						longitude: this.longitude
					})
					.then(res => {
						console.log('定位', res.data);
						let msg = res.data;
						uni.showToast({
							title: msg,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					})
					.catch(err => {});

			},
			ToHomePage() {
				uni.switchTab({
					url: '../../bottom-nav/index/index',

				});
			},

			init() {
				uni.$u.http
					.get('/app/seat/DetermineSeat')
					.then(res => {
						console.log(res);
						if (res == null) {
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/bottom-nav/index/index"
								})
							}, 2000);
						}
						this.seatId = res.data.id
						this.seat = {
							LibiaryName: res.data.libraryName + '-' + res.data.areaName,
							SeatId: res.data.id + '号,' + res.data.row + '排' + res.data.col + '座',
						};
					})
			}



		},
		onReady() {
			uQRCode
				.make({
					canvasId: 'qrcode',
					componentInstance: this,
					size: 225,
					margin: 10,
					text: 'uQRCode',
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					text: this.seatId
				})
				.then(res => {
					console.log(res);
				});
		},
		mounted() {}
	};
</script>

<style>
	canvas {
		display: inline-block;
	}

	.content {
		margin-top: 10px;
	}

	.base-coupons {
		width: 75%;
		height: 420px;
		margin: 40px auto;

		background: radial-gradient(circle at left bottom, transparent 20px, white 0) top left / 50% 70% no-repeat,
			radial-gradient(circle at left top, transparent 20px, white 0) bottom left / 50% 31% no-repeat,
			radial-gradient(circle at right bottom, transparent 20px, white 0) top right / 50% 70% no-repeat,
			radial-gradient(circle at right top, transparent 20px, white 0) bottom right / 50% 31% no-repeat;
		filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: center;
		align-items: center;
	}

	.text {
		font-size: 30rpx;
	}

	.down {
		height: 100px;
		width: 80%;
		/* background-color: #08B5FF; */
	}

	.libiary {
		padding: 2px 0;
		display: flex;
		justify-content: space-between;
	}

	.other {
		min-height: 50px;
		padding: 5px 0;
		display: flex;
		/* background-color: #007AFF; */
		flex-direction: column;
		justify-content: space-around;
		/* align-content: space-around; */
	}

	.address {
		padding-top: 10px;
		color: #8799a3;
		display: flex;
		justify-content: center;
		/* background-color: #0081FF; */
	}

	.position,
	.sure {
		/* background-color: #00B26A; */
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.addressText {
		width: 70%;
		word-wrap: break-word;
		/* background-color: #007AFF; */
	}

	.position-left {
		width: 26%;
		/* background-color: #00B26A; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.position-right {
		width: 17%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #ffffff;
		border-radius: 7px;
	}

	.color2 {
		background-color: #8a2be2;
	}

	.color1 {
		background-color: #a4c639;
	}

	.sure {
		margin: 15px auto;
		margin-bottom: 10px;
		width: 60%;
		background-color: #519259;
		font-size: 20px;
		color: #f0f0f0;
		border-radius: 5px;
	}
</style>
